<?php

use Wgx\Admin\Com\AdminSession;

?>

<div id="topbar" class="topbar">
  <button class="sidebar-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="topbar-title">
    <a href="/">
      <span class="title-content">
        <i class="fa fa-leaf"></i>
        <span>
          <?php echo \PhpYes\Apps::getAdminPageTitlePrefix(); ?>
        </span>
      </span>
    </a>
  </div>
  <ul class="topbar-buttons wgxadmin-clearfix">
    <li class="button tasks">
      <a class="topbar-button-grey" href="#" onclick="return false;">
        <span class="button-content">
          <i class="icon fa fa-tasks"></i>
          <span class="wgxadmin-badge">4</span>
        </span>
      </a>
      <ul class="topbar-dropdown-menu" style="display: none;">
        <li class="dropdown-header">
          <i class="icon fa fa-check"></i> 4 Tasks to complete
        </li>
        <li class="dropdown-content">
          <!-- <div class="scroll-track" style="display: none;"></div> -->
          <div class="scroll-content">
            <ul class="dropdown-content-list">
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">Software Update</span>
                    <span style="display: block; float: right;">65%</span>
                  </div>
                  <div class="wgxadmin-progress">
                    <div style="background-color: #2A91D8; width: 65%;" class="wgxadmin-progress-bar"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">Hardware Upgrade</span>
                    <span style="display: block; float: right;">35%</span>
                  </div>
                  <div class="wgxadmin-progress">
                    <div style="background-color: #CA5952; width: 35%;" class="wgxadmin-progress-bar"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">Unit Testing</span>
                    <span style="display: block; float: right;">15%</span>
                  </div>
                  <div class="wgxadmin-progress">
                    <div style="background-color: #F2BB46; width: 15%;" class="wgxadmin-progress-bar"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">Bug Fixes</span>
                    <span style="display: block; float: right;">90%</span>
                  </div>
                  <div class="wgxadmin-progress wgxadmin-progress-striped active">
                    <div style="background-color: #59A84B; width: 90%;" class="wgxadmin-progress-bar"></div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown-footer">
          <a href="#" onclick="return false;">
            See tasks with details
            <i class="icon fa fa-arrow-right"></i>
          </a>
        </li>
      </ul>
    </li>
    <li class="button notifications">
      <a class="topbar-button-purple" href="#" onclick="return false;">
        <span class="button-content">
          <i class="icon fa fa-bell animated-bell"></i>
          <span class="wgxadmin-badge">8</span>
        </span>
      </a>
      <ul class="topbar-dropdown-menu" style="display: none;">
        <li class="dropdown-header">
          <i class="icon fa fa-exclamation-triangle"></i> 8 Notifications
        </li>
        <li class="dropdown-content">
          <!-- <div class="scroll-track" style="display: none;"></div> -->
          <div class="scroll-content">
            <ul class="dropdown-content-list">
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">
                      <i class="icon fa fa-comment" style="background-color: #D6487E; border-color: #D6487E;"></i> New Comments
                    </span>
                    <span class="wgxadmin-badge" style="display: block; float: right; background-color: #3A87AD;">+12</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">
                      <i class="icon fa fa-user" style="background-color: #428BCA; border-color: #428BCA;"></i> Bob just signed up as an editor ...
                    </span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">
                      <i class="icon fa fa-shopping-cart" style="background-color: #87B87F; border-color: #87B87F;"></i> New Orders
                    </span>
                    <span class="wgxadmin-badge" style="display: block; float: right; background-color: #87B87F;">+8</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="wgxadmin-clearfix">
                    <span style="display: block; float: left;">
                      <i class="icon fab fa-twitter" style="background-color: #6FB3E0; border-color: #6FB3E0;"></i> Followers
                    </span>
                    <span class="wgxadmin-badge" style="display: block; float: right; background-color: #3A87AD;">+11</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown-footer">
          <a href="#" onclick="return false;">
            See all notifications
            <i class="icon fa fa-arrow-right"></i>
          </a>
        </li>
      </ul>
    </li>
    <li class="button messages">
      <a class="topbar-button-green" href="#" onclick="return false;">
        <span class="button-content">
          <i class="icon fa fa-envelope animated-vertical"></i>
          <span class="wgxadmin-badge">5</span>
        </span>
      </a>
      <ul class="topbar-dropdown-menu" style="display: none;">
        <li class="dropdown-header">
          <i class="icon far fa-envelope"></i> 5 Messages
        </li>
        <li class="dropdown-content">
          <!-- <div class="scroll-track" style="display: none;"></div> -->
          <div class="scroll-content">
            <ul class="dropdown-content-list">
              <li>
                <a href="#" onclick="return false;">
                  <div class="msg-avatar">
                    <img src="/wgx_admin_static/admin/images/avatar.png" alt="avatar" />
                  </div>
                  <div class="msg-body">
                    <div class="msg-content">
                      <span class="msg-name">Alex:</span>
                      <span class="msg">Ciao sociis natoque penatibus et auctor ... </span>
                    </div>
                    <div class="msg-time">
                      <i class="far fa-clock"></i>
                      <span class="time">a moment ago</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="msg-avatar">
                    <img src="/wgx_admin_static/admin/images/avatar3.png" alt="avatar" />
                  </div>
                  <div class="msg-body">
                    <div class="msg-content">
                      <span class="msg-name">Susan:</span>
                      <span class="msg">Vestibulum id ligula porta felis euismod ...</span>
                    </div>
                    <div class="msg-time">
                      <i class="far fa-clock"></i>
                      <span class="time">20 minutes ago</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="msg-avatar">
                    <img src="/wgx_admin_static/admin/images/avatar4.png" alt="avatar" />
                  </div>
                  <div class="msg-body">
                    <div class="msg-content">
                      <span class="msg-name">Bob:</span>
                      <span class="msg">Nullam quis risus eget urna mollis ornare ... </span>
                    </div>
                    <div class="msg-time">
                      <i class="far fa-clock"></i>
                      <span class="time">3:15 pm</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="msg-avatar">
                    <img src="/wgx_admin_static/admin/images/avatar2.png" alt="avatar" />
                  </div>
                  <div class="msg-body">
                    <div class="msg-content">
                      <span class="msg-name">Kate:</span>
                      <span class="msg">Ciao sociis natoque eget urna mollis ornare ...</span>
                    </div>
                    <div class="msg-time">
                      <i class="far fa-clock"></i>
                      <span class="time">1:33 pm</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" onclick="return false;">
                  <div class="msg-avatar">
                    <img src="/wgx_admin_static/admin/images/avatar5.png" alt="avatar" />
                  </div>
                  <div class="msg-body">
                    <div class="msg-content">
                      <span class="msg-name">Fred:</span>
                      <span class="msg">Vestibulum id penatibus et auctor ...</span>
                    </div>
                    <div class="msg-time">
                      <i class="far fa-clock"></i>
                      <span class="time">10:09 am</span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown-footer">
          <a href="#" onclick="return false;">
            See all messages
            <i class="icon fa fa-arrow-right"></i>
          </a>
        </li>
      </ul>
    </li>
    <li class="button user">
      <a class="topbar-button-lightblue" href="#" onclick="return false;">
        <img class="avatar" src="/wgx_admin_static/admin/images/user.jpg" alt="user avatar">
        <span class="username"><span class="welcome">欢迎,</span> <?php echo AdminSession::getSingleObj()->getAdminUserEntity()->getName(); ?> </span>
        <i class="icon fa fa-caret-down"></i>
      </a>
      <ul class="topbar-dropdown-menu" style="display: none;">
        <li>
          <a href="#" onclick="return false;">
            <i class="icon fas fa-cog"></i> Settings
          </a>
        </li>
        <li>
          <a href="#" onclick="return false;">
            <i class="icon fas fa-user"></i> Profile
          </a>
        </li>
        <li class="divider">
        </li>
        <li>
          <a href="#" onclick="return false;">
            <i class="icon fas fa-power-off"></i> Logout
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>